﻿@(Html.DevExtreme().Chart()
    .ID("chart")
    .DataSource(new[] {
        new { name = "Everest", height = 8848, system = "Mahalangur Himalaya" },
        new { name = "Godwin Austen", height = 8611, system = "Baltoro Karakoram" },
        new { name = "Kangchenjunga", height = 8586, system = "Kangchenjunga Himalaya" },
        new { name = "Lhotse", height = 8516, system = "Mahalangur Himalaya" },
        new { name = "Makalu", height = 8485, system = "Mahalangur Himalaya" },
        new { name = "Cho Oyu", height = 8188, system = "Mahalangur Himalaya" }
    })
    .Series(s => s.Add()
        .ArgumentField("name")
        .ValueField("height")
        .Type(SeriesType.Bar)
        .Color("#E55253")
    )
    .Tooltip(t => t
        .Enabled(true)
        .CustomizeTooltip(@<text>
            function(arg) {
                return {
                    text: "<span class='title'>" + arg.argumentText + "</span><br />&nbsp;<br />" +
                        "System: " + arg.point.data.system + "<br />" + "Height: " +
                        arg.valueText + " m"
                };
            }
        </text>))
    .Title("The Highest Mountains")
    .Legend(l => l.Visible(false))
    .ArgumentAxis(a => a.Visible(true))
    .ValueAxis(a => a.Add()
        .VisualRange(range => range.StartValue(8000))
        .Label(l => l.CustomizeText(@<text>
            function() {
                return this.value + " m";
            }
        </text>)))
)

<div id="buttonGroup">
    @(Html.DevExtreme().Button()
        .Icon("print")
        .Text("Print")
        .OnClick("print")
    )
    @(Html.DevExtreme().Button()
        .Icon("export")
        .Text("Export")
        .OnClick("exportChart")
    )
</div>

<script>
    function getChartInstance() {
        return $("#chart").dxChart("instance");
    }

    function print() {
        getChartInstance().print();
    }

    function exportChart() {
        getChartInstance().exportTo("Example", "png");
    }
</script>
